<template>
  <a-page-header>
    <a-card>
      <a-table :columns="columns" :data-source="data"
               :loading="loading"
               :rowKey="record => record.cinemaHallId" >
        <template slot="title">
          <a-row type="flex" justify="space-between">
            <a-col :span="4">
              <a-button type="primary" style="margin-left: 10px;" icon="plus-circle" @click="showAddModal()" >
                新增影厅
              </a-button>
              <a-modal
                  :title="modalForm.title"
                  :visible="modalForm.visible"
                  :confirm-loading="modalForm.confirmLoading"
                  okText="提交"
                  cancelText="取消"
                  @ok="handleModalOk"
                  @cancel="handleModalCancel">
                <a-form-model @submit="handleModalFormSubmit"
                              :label-col="{span:8}" :wrapper-col="{span:14}" ref="addForm"
                              :model="addForm" :rules="modalForm.modalFormRules"  >
                  <a-form-model-item label="所属影院" ref="cinemaId" prop="cinemaId">
                    <a-select
                        v-model="addForm.cinemaId"
                        show-search
                        placeholder="所属影院"
                        :disabled="modalForm.isDisabled"
                        option-filter-prop="children"
                        style="width:100%"
                        :filter-option="filterOption">
                      <a-select-option v-for="item in cinemaList" :value="item.cinemaId" :key="'cinema'+item.cinemaId">
                        {{ item.cinemaName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>

                  <a-form-model-item label="影厅名称" ref="cinemaHallName" prop="cinemaHallName">
                    <a-input v-model="addForm.cinemaHallName" placeholder="影厅名称"/>
                  </a-form-model-item>

                  <a-form-model-item label="影厅最大列座位数" ref="maxSeatX" prop="maxSeatX">
                    <a-input-number :disabled="modalForm.isDisabled" v-model="addForm.maxSeatX" style="width: 100%" :min="1" :max="200" placeholder="影厅最大横向座位" />
                  </a-form-model-item>
                  <a-form-model-item label="影厅最大行座位数" ref="maxSeatY" prop="maxSeatY">
                    <a-input-number :disabled="modalForm.isDisabled" v-model="addForm.maxSeatY" style="width: 100%" :min="1" :max="200" placeholder="影厅最大纵向座位" />
                  </a-form-model-item>

                  <a-form-model-item label="是否启用" ref="status" prop="status">
                    <a-radio-group v-model="addForm.status">
                      <a-radio-button value="1">
                        启用
                      </a-radio-button>
                      <a-radio-button value="0">
                        禁用
                      </a-radio-button>
                    </a-radio-group>
                  </a-form-model-item>
                </a-form-model>

              </a-modal>
            </a-col>

            <a-col >
              <!--       头部搜索表单       -->
              <a-form-model ref="queryForm"
                            layout="inline" :model="formInline">
                <a-form-model-item ref="searchCinemaId" prop="searchCinemaId">
                  <a-select
                      show-search
                      v-model="formInline.searchCinemaId"
                      placeholder="所属影院"
                      option-filter-prop="children"
                      style="width: 200px"
                      :filter-option="filterOption">
                    <a-select-option v-for="item in cinemaList" :value="item.cinemaId" :key="'searchCinema'+item.cinemaId">
                      {{ item.cinemaName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>

                <a-form-model-item ref="cinemaHallNameLike" prop="cinemaHallNameLike">
                  <a-input v-model="formInline.cinemaHallNameLike" placeholder="模糊查询影厅名称">
                  </a-input>
                </a-form-model-item>

                <a-form-model-item ref="searchStatus" prop="searchStatus">
                  <a-select v-model="formInline.searchStatus" style="width: 200px" placeholder="请选择要查询的影厅状态">
                    <a-select-option value="1">
                      启用
                    </a-select-option>
                    <a-select-option value="0">
                      禁用
                    </a-select-option>
                    <a-select-option value="3">
                      逻辑删除
                    </a-select-option>
                  </a-select>
                </a-form-model-item>

                <a-form-model-item>
                  <a-button
                      type="primary"
                      @click="handleSubmit"
                      :disabled="isDisable">
                    查询
                  </a-button>
                  <a-button style="margin-left: 10px;" @click="resetSearchForm('queryForm')">
                    重置
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </a-col>
          </a-row>
        </template>

        <template #cinemaId="cinemaId">
          {{getCinemaName(cinemaId)}}
        </template>
        <template #maxSeatT="record">
          {{record.maxSeatX*record.maxSeatY}}
        </template>
        <template #status="status">
          <a-tag v-if="status===1" :color="'green'">
            <span>启用</span>
          </a-tag>
          <a-tag v-else-if="status===0" :color="'volcano'">
            <span>禁用</span>
          </a-tag>
          <a-tag v-else-if="status===3" :color="'red'">
            <span>逻辑删除</span>
          </a-tag>
          <a-tag v-else :color="'purple'">
            <span>{{'未适配:'+status}}</span>
          </a-tag>
        </template>

        <template #action="record">
          <a-button type="primary" shape="circle" icon="edit" @click="showEditModal(record)" />
          <a-divider type="vertical" />
          <a-popconfirm
              :title="`确认要删除:${record.cinemaHallName}吗?`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDeleteCinemaHall(record.cinemaHallId)"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button type="danger" shape="circle" icon="delete" />
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm
              :title="`确认要为${record.cinemaHallName}影厅生成座位吗,如果已生成过会将原本的座位全部置为逻辑删除状态!`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="generatorSeat(record)"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button type="primary" ghost>生成座位</a-button>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-button type="primary" ghost @click="showSeatModal(record)">编辑座位</a-button>
        </template>
      </a-table>
    </a-card>
    <!--  座位Modal 用于显示座位列表  -->
    <a-modal
        :key="'seatModal'"
        :title="seatModal.title"
        :visible="seatModal.visible"
        :footer="null"
        @cancel="handleSeatModalCancel"
        :width="1000"
    >
      <a-table :key="'seatTable'+new Date().getTime()"
               :columns="seatModal.seatColumns" :data-source="seatModal.seatData"
               :loading="loading" size="middle"
               :rowKey="record => record.seatId"  >

        <template #seatType="seatType">
          <a-tag v-if="seatType==='N'" :color="'green'">
            <span>普通座</span>
          </a-tag>
          <a-tag v-else-if="seatType==='C'" :color="'pink'">
            <span>情侣座</span>
          </a-tag>
        </template>

        <template #status="status">
          <a-tag v-if="status===1" :color="'green'">
            <span>启用</span>
          </a-tag>
          <a-tag v-else-if="status===0" :color="'volcano'">
            <span>禁用</span>
          </a-tag>
          <a-tag v-else-if="status===3" :color="'red'">
            <span>逻辑删除</span>
          </a-tag>
          <a-tag v-else :color="'purple'">
            <span>{{'未适配:'+status}}</span>
          </a-tag>
        </template>

        <template #action="record">
          <a-button type="primary" shape="circle" icon="edit" @click="showSeatEditModal(record)" />
        </template>

      </a-table>
    </a-modal>
    <!--  座位表单  -->
    <a-modal
        :key="'seatEditModal'"
        :title="seatModal.edit.title"
        :visible="seatModal.edit.visible"
        :confirm-loading="seatModal.edit.confirmLoading"
        :rules="seatModal.edit.seatRules"
        okText="提交"
        cancelText="取消"
        @ok="handleSeatModalFormSubmit"
        @cancel="handleSeatEditModalCancel"
    >
      <a-form-model
          :label-col="{span:8}" :wrapper-col="{span:14}" ref="editForm"
          :model="seatModal.editForm"   >

        <a-form-model-item label="座位类型" ref="seatType" prop="seatType">
          <a-select v-model="seatModal.editForm.seatType" style="width: 100%">
            <a-select-option value="N">
              普通座
            </a-select-option>
            <a-select-option value="C">
              情侣座
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="座位行" ref="seatY" prop="seatY">
          <a-input :disabled="true" v-model="seatModal.editForm.seatY" style="width: 100%"  placeholder="影厅座位行" />
        </a-form-model-item>

        <a-form-model-item label="座位列" ref="seatX" prop="seatX">
          <a-input :disabled="true" v-model="seatModal.editForm.seatX" placeholder="影厅座位列" />
        </a-form-model-item>

        <a-form-model-item label="是否启用" ref="status" prop="status">
          <a-radio-group v-model="seatModal.editForm.status">
            <a-radio-button value="1">
              启用
            </a-radio-button>
            <a-radio-button value="0">
              锁定
            </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-page-header>
</template>

<script>
import {
  addCinemaHall,
  updateCinemaHall,
  logicDeleteCinemaHallById,
  getCinemaHallListCondition,
  generatorSeat, getSeatByHallId, updateSeat
} from "@/api/cinemaHall";
import {getCinemaList} from "@/api/cinema";
const seatColumns = [
  {
    title: '座位标识',
    dataIndex: 'seatId',
    key: 'seatId',
  },
  {
    title: '影厅标识',
    dataIndex: 'cinemaHallId',
    key: 'cinemaHallId',
  },
  {
    title: '座位行',
    dataIndex: 'seatY',
    key: 'seatY',
  },
  {
    title: '座位列',
    dataIndex: 'seatX',
    key: 'seatX',
  },
  {
    title: '座位类型',
    dataIndex: 'seatType',
    key: 'seatType',
    scopedSlots: { customRender: 'seatType' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];
const columns = [
  {
    title: '影厅标识',
    dataIndex: 'cinemaHallId',
    key: 'cinemaHallId',
  },
  {
    title: '影厅名称',
    dataIndex: 'cinemaHallName',
    key: 'cinemaHallName',
  },
  {
    title: '影厅最大列座位数',
    dataIndex: 'maxSeatX',
    key: 'maxSeatX',
  },
  {
    title: '影厅最大行座位数',
    dataIndex: 'maxSeatY',
    key: 'maxSeatY',
  },
  {
    title: '总座位数',
    key: 'maxSeatT',
    scopedSlots: { customRender: 'maxSeatT' },
  },
  {
    title: '所属影厅',
    dataIndex: 'cinemaId',
    key: 'cinemaId',
    scopedSlots: { customRender: 'cinemaId' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];
const seatRules = {
  seatType: [
    {required: true, message: '请选择座位类型',trigger:['blur','change']},
  ],
  status:[
    {required: true, message: '请选择是否启用', trigger: 'change'}
  ]
}
const modalFormRules = {
  cinemaId: [
    {required: true, message: '请选择所属影院',trigger:['blur','change']},
  ],
  cinemaHallName: [
    {required: true, message: '请输入影厅名称', trigger: ['blur']},
  ],
  maxSeatX: [
    {required: true, message: '请输入影厅最大的横向座位数量', trigger: 'blur'},
  ],
  maxSeatY: [
    {required: true, message: '请输入影厅最大的纵向座位数量', trigger: 'blur'},
  ],
  status:[
    {required: true, message: '请选择是否启用', trigger: 'change'}
  ]
}
export default {
  name: "SystemCinemaHall",
  data() {
    return {
      formInline: {
        searchCinemaId:undefined,
        cinemaHallNameLike: '',
        searchStatus: undefined,
      },
      seatModal:{
        title:'',
        visible:false,
        cinemaRecord:undefined,
        seatColumns,
        seatData:[],
        edit:{
          confirmLoading:false,
          title:'',
          visible:false,
          seatRules,
        },
        editForm:{
          seatId:undefined,
          cinemaHallId:undefined,
          seatX:undefined,
          seatY:undefined,
          seatType:undefined,
          status:undefined
        }
      },
      modalForm:{
        title:'',
        visible:false,
        confirmLoading: false,
        modalFormRules,
        isDisabled:false
      },
      addForm:{
        cinemaHallId:undefined,
        cinemaId:undefined,
        cinemaHallName:'',
        status:undefined,
        maxSeatX:undefined,
        maxSeatY:undefined
      },
      cinemaList:[],
      data:[],
      loading:false,
      columns,
      isHandleSubmit:false,
    }
  },
  mounted() {
    this.getCinemaHallData()
    this.getCinemaListData()
  },
  methods:{
    //座位modal
    handleSeatModalFormSubmit(){
      this.$refs['editForm'].validate(valid=>{
        if (valid) {
          let submitData = this.seatModal.editForm
          // submitData.status = this.seatModal.editForm.status === "1"
          this.seatModal.edit.confirmLoading = true
          updateSeat(submitData).then(res=>{
            this.seatModal.edit.confirmLoading = false
            this.$notification['success']({
              message: '成功',
              description: `${res.data}`,
              duration: 4
            })
            this.seatModal.seatData = this.getSeatList(submitData.cinemaHallId)
          }).catch((err)=>{
            this.seatModal.edit.confirmLoading = false
            this.$notification['error']({
              message: '失败',
              description: `${err.data}`,
              duration: 4
            })
          })
        } else {
          return false;
        }
      })
    },
    resetSeatForm() {
      this.seatModal.editForm ={
        seatId:undefined,
        cinemaHallId:undefined,
        seatX:undefined,
        seatY:undefined,
        seatType:undefined,
        status:undefined
      }
      this.$refs['editForm'].resetFields();
    },
    // 生成座位
    generatorSeat(record){
      generatorSeat(record.cinemaHallId,record.maxSeatX,record.maxSeatY).then(res=>{
        this.$notification['success']({
          message: '成功',
          description: `${res.data}`,
          duration: 4
        })
      })
    },
    showSeatEditModal(record){
      this.seatModal.edit.title = '修改座位'
      this.seatModal.edit.visible = true
      let {   seatId, cinemaHallId, seatX, seatY, seatType,status} = record
      this.seatModal.editForm = {
        seatId,cinemaHallId,seatX,seatY,seatType,status
      }
    },
    handleSeatEditModalCancel(){
      this.resetSeatForm()
      this.seatModal.edit.visible = false
    },
    showSeatModal(record){
      this.seatModal.seatData = this.getSeatList(record.cinemaHallId)
      this.seatModal.title = '影厅座位'
      this.seatModal.cinemaRecord = record
      this.seatModal.visible = true
    },
    getSeatList(hallId){
      getSeatByHallId(hallId).then(res=>{
        this.seatModal.seatData = res.data
      })
    },
    handleSeatModalCancel(){
      this.seatModal.visible = false
    },
    // 查询表单提交
    print(a,b){
      console.log(a,b)
    },
    handleSubmit() {
      console.log(this.formInline)
      this.isHandleSubmit = true;
      let submitParams = {}
      if (typeof (this.formInline.searchCinemaId)!=='undefined'){
        submitParams['cinemaId'] = this.formInline.searchCinemaId
      }
      if (this.formInline.menuNameLike!==''){
        submitParams['cinemaHallNameLike'] = this.formInline.cinemaHallNameLike
      }
      if (typeof (this.formInline.searchStatus)!=='undefined'){
        submitParams['cinemaHallStatus']=this.formInline.searchStatus
      }
      console.log('SystemCinemaHall handleSubmit',submitParams)
      this.getCinemaHallData(submitParams)
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      if (this.isHandleSubmit){
        this.getCinemaHallData()
      }
    },
    // 获取影院
    getCinemaListData(){
      getCinemaList().then(res=>{
        this.cinemaList = res.data
      })
    },
    getCinemaName(cinemaId){
      for (let item of this.cinemaList){
        if (item.cinemaId===cinemaId){
          return item.cinemaName
        }
      }
      return cinemaId
    },
    // 获取影厅列表
    getCinemaHallData(param= {}){
      this.loading = true
      getCinemaHallListCondition(param).then(res=>{
        this.data = res.data
      }).catch(err=>{
        console.log("SystemCinemaHall:getCinemaHallData:"+err.message);
      }).finally(()=>{
        this.loading = false
      })
    },
    // addForm start
    showAddModal(){
      this.modalForm.isDisabled = false;
      this.modalForm.visible =  true
      this.modalForm.title = '新增影厅'
    },
    showEditModal(record){
      console.log(record)
      this.modalForm.isDisabled = true
      this.modalForm.visible =  true
      this.modalForm.title = '修改影厅'
      let {cinemaHallId, cinemaId, cinemaHallName, status,maxSeatX,maxSeatY} = record
      this.addForm = {
        cinemaHallId, cinemaId, cinemaHallName,maxSeatX,maxSeatY,
        status
      }
    },
    // 处理modal里的表单提交
    handleModalOk(){
      this.handleModalFormSubmit()
    },
    handleModalCancel(){
      this.modalForm.visible = false
      this.resetForm('addForm')
    },
    handleModalFormSubmit(){
      this.$refs['addForm'].validate(valid=>{
        if (valid) {
          let submitData = this.addForm
          // submitData.status = this.addForm.status === "1"
          this.modalForm.confirmLoading = true
          if (this.modalForm.isDisabled){
            this.handleUpdateCinemaHall(submitData)
          }else {
            this.handleAddCinemaHall(submitData)
          }
        } else {
          this.handleFiled(new Error('表单校验不通过'))
          return false;
        }
      })
    },
    resetForm(formName) {
      this.addForm = {
        cinemaHallId:undefined,
        cinemaId:undefined,
        cinemaHallName:'',
        status:undefined,
        maxSeatX:undefined,
        maxSeatY:undefined
      }
      this.$refs[formName].resetFields();
    },
    // addForm end
    handleAddCinemaHall(cinemaHall){
      addCinemaHall(cinemaHall).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleDeleteCinemaHall(cinemaHallId){
      logicDeleteCinemaHallById(cinemaHallId).then(res=>{
        this.handleSuccess(res)
      }).catch(err=> this.handleFiled(err))
    },
    handleUpdateCinemaHall(cinemaHall){
      updateCinemaHall(cinemaHall).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleSuccess(res){
      this.modalForm.confirmLoading = false
      this.$notification['success']({
        message: '成功',
        description: `${res.data}`,
        duration: 4
      })
      this.getCinemaHallData()
    },
    handleFiled(err){
      this.modalForm.confirmLoading = false
      console.log(err.message)
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).message || {}).message||err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.indexOf(input) >= 0
      );
    },
  },

  computed:{
    isDisable(){
      let flag = typeof (this.formInline.searchCinemaId)==='undefined'
      return flag&&this.formInline.cinemaHallNameLike===''&&!this.formInline.searchStatus;
    },
  }
}
</script>

<style scoped>

</style>
